import {Form, Row, Col, Button, Upload, Space, message} from 'antd'
import React, {useEffect, useState} from 'react'
import {history, useModel} from 'umi'
import cardStyles from '../index.less'
import {getTransfer, postUserInfo} from '@/service/order'
import styles from './index.less'
import {FormTime, FormInput} from '@/components/SearchForm/SearchFormItem'
import {uploadFileUrl} from '@/service/common/upload'
import {formatDate} from '@/utils/common/dateFilter'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 20, offset: 0},
	},
}
function FileUserInfo(props: any) {
	const {info} = props
	const [form] = Form.useForm()
	const [deduction, setDeduction] = useState<any[]>([]) // 扣款列表
	const [deductionAll, setdeductionAll] = useState(0) // 扣款总额
	const [reduction, setReduction] = useState([]) // 减免列表
	const [reductionAll, setreductionAll] = useState(0) // 减免总额
	const [data, setDate] = useState({
		estimatedTime: '',
		applyRemark: '',
		remark: '',
		attachmentList: '',
	})
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const [fileList, setFileList] = useState<any>([])
	const [allNumState, setAllNumState] = useState('1')
	const [allNum, setAllNum] = useState(0)

	//  文件上传生成上传信息
	const uploadProps = {
		action: uploadFileUrl,
		name: fileName, // 滴滴上传:file 测试上传:files
		data: {
			modelName: 'carOrder',
			targetAttr: 5,
		},
		beforeUpload: (file: any) => {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				message.error('文件必须小于200MB')
			}
			return isLt200M
		},
		onChange(info1: any) {
			if (info1.file.status === 'done') {
				setFileList(info1?.fileList)
				const list: any = []
				info1?.fileList?.forEach((res: any) =>
					list.push(res?.response?.data?.id?.toString()),
				)
				form.setFieldsValue({attachmentList: list})
			}
			setFileList(info1?.fileList)
		},
		onRemove() {
			message.success(`移除成功`)
			form.setFieldValue('attachmentList', '')
		},
		fileList,
	}
	useEffect(() => {
		if (info?.id) {
			getTransfer(info?.id).then((res) => {
				if (res?.success) {
					setDate(res?.data)
					setDeduction(res?.data?.collectFeeList)
					let num = 0
					let num2 = 0
					res?.data?.collectFeeList?.forEach((res1: any) => {
						const num1 = Number(res1?.feeItemAmount)
						num += num1
					})
					setdeductionAll(num)
					res?.data?.deductionFeeList?.forEach((res2: any) => {
						const num3 = Number(res2?.feeItemAmount)
						num2 += num3
					})
					setreductionAll(num2)
					setReduction(res?.data?.deductionFeeList)
					if (num >= num2) {
						setAllNumState('1')
						setAllNum(Number((num - num2).toFixed(2)))
					} else {
						setAllNumState('2')
						setAllNum(Number((num2 - num).toFixed(2)))
					}
				}
			})
		}
	}, [info?.id])
	// 取消
	const onCancel = () => {
		history.goBack()
	}
	const onFinishFailed = (errorInfo: any) => errorInfo
	// 提交
	const onFinish = (value: any) => {
		const values = {...value}
		values.transferTime = formatDate(
			value.transferTime,
			'YYYY-MM-DD HH:mm:ss',
		)
		postUserInfo(info?.id, values).then((res: any) => {
			if (res?.success) {
				history.goBack()
			}
		})
	}
	return (
		<>
			<div className={cardStyles.card} id="transInfo">
				<p className={cardStyles.title}>申请过户</p>
				<Form {...formLayout} wrapperCol={{flex: 1}}>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={24}>
							<Form.Item label="预计过户时间">
								{data?.estimatedTime}
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item label="备注">
								{data?.applyRemark}
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
			<div className={cardStyles.card}>
				<div className={cardStyles.title}>
					<span className={styles.title}>过户结算信息（已结清）</span>
					<span
						className={styles.value}
						style={{fontWeight: 'normal', fontSize: '14px'}}>
						{allNumState === '1'
							? '需要客户补缴金额/元'
							: '需要退还客户金额/元'}
						：{allNum}
					</span>
				</div>
				<div className={styles.box}>
					<p className={styles.title}>扣款费用项</p>
					<div className={styles.line}>
						{deduction?.map((res: any) => (
							<div className={styles.line_box}>
								<p className={styles.text}>
									{res?.feeItemName}:
								</p>
								<p className={styles.value}>
									{res?.feeItemAmount}
								</p>
							</div>
						))}
					</div>
					<div className={styles.all}>
						<span>合计：</span>
						<span>{deductionAll?.toFixed(2)}</span>
					</div>
				</div>

				<div className={styles.box}>
					<p className={styles.title}>减免费用项</p>
					<div className={styles.line}>
						{reduction?.map((res: any) => (
							<div className={styles.line_box}>
								<p className={styles.text}>
									{res?.feeItemName}:
								</p>
								<p className={styles.value}>
									{res?.feeItemAmount}
								</p>
							</div>
						))}
					</div>
					<div className={styles.all}>
						<span>合计：</span>
						<span>{reductionAll?.toFixed(2)}</span>
					</div>
				</div>
			</div>
			<div className={cardStyles.card} id="deliveryCarInfo">
				<p className={cardStyles.title}>过户资料上传</p>
				<div className={styles.form}>
					<Form
						onFinish={onFinish}
						onFinishFailed={onFinishFailed}
						autoComplete="off"
						{...formLayout}
						form={form}>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<FormTime
									label="过户时间"
									name="transferTime"
									subtype="date"
									placeholder="请选择过户时间"
									rules={[
										{
											required: true,
											message: '请选择过户时间',
										},
									]}
									style={{width: '300px'}}
								/>
							</Col>
							<Col span={24}>
								<FormInput
									name="handlerName"
									label="过户工作人员"
									maxLength={200}
									placeholder="请输入过户工作人员"
									allowClear
									style={{width: '300px'}}
									rules={[
										{
											required: true,
											message: '请输入过户工作人员',
										},
									]}
								/>
							</Col>
							<Col span={24}>
								<FormInput
									name="handleRemark"
									label="备注"
									maxLength={200}
									placeholder="请填写绑车备注信息，不超过200个字符"
									allowClear
									style={{width: '600px'}}
								/>
							</Col>
							<Col span={24}>
								<Form.Item
									label="过户资料"
									name="attachmentList"
									rules={[
										{
											required: true,
											message: '请上传过户资料附件',
										},
									]}>
									<Upload {...uploadProps}>
										{fileList?.length >= 5 ? null : (
											<Button>请选择文件</Button>
										)}
									</Upload>
									<p style={{margin: '15px 0 0 0'}}>
										清单说明：附件最大支持200M，
									</p>
									<p>支持格式：PDF、Word、Excel、JPG、PNG</p>
								</Form.Item>
							</Col>
						</Row>
						<Row justify="center" className={cardStyles.rows}>
							<Form.Item>
								<Space>
									<Button shape="round" onClick={onCancel}>
										取消
									</Button>
									<Button
										shape="round"
										type="primary"
										htmlType="submit">
										提交
									</Button>
								</Space>
							</Form.Item>
						</Row>
					</Form>
				</div>
			</div>
		</>
	)
}
export default FileUserInfo
